<template>
  <div class="app-container">
    <!-- 搜索 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <div class="grid-content bg-purple search">
            <el-form ref="query" :model="query" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="名称">
                <i slot="label" class="el-icon-search" style="font-size:20px"></i>
                <el-input style="width:360px" v-model="query.keywords" placeholder="请输入商品名称、手机号、昵称"></el-input>
              </el-form-item>
              <el-form-item style="margin-bottom:0px" label="是否一口价">
                <el-select style="width:360px" v-model="query.isBuy" placeholder="请选择是否一口价">
                  <el-option label="全部" value="0"></el-option>
                  <el-option label="一口价" value="1"></el-option>
                </el-select>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="grid-content bg-purple-light" style="text-align:right">
            <el-button type="primary" @click="queryAsk">查询</el-button>
            <el-button @click="queryReset">重置</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>
    <!-- 扫货开关 -->
    <el-card class="box-card">
      <el-row type="flex" align="middle">
        <el-col :span="12">
          <div class="grid-content bg-purple search" style="margin-left:70px">
            <el-form ref="query" :model="query" label-width="100px">
              <el-form-item style="margin-bottom:0px" label="自动扫货开关">
                <el-switch
                  v-model="query.autobuy"
                  active-color="#13ce66"
                  active-value="1"
                  inactive-value="0"
                  @change="setAuto"
                ></el-switch>
              </el-form-item>
              <el-form-item label="自动扫货比例">
                <div style="display:flex;">
                  <el-input v-model="query.autopercent" placeholder="自动扫货比例"></el-input>
                  <span style="font-size:12px;width:156px;margin-left:10px">输入 0.1 为 10%</span>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </el-col>
        <!-- <el-col :span="12">
          <div class="grid-content bg-purple-light" style="text-align:right">
            <el-button type="primary" @click="queryAsk">查询</el-button>
            <el-button @click="queryReset">重置</el-button>
          </div>
        </el-col>-->
      </el-row>
    </el-card>
    <!-- 表格 -->
    <el-card class="box-card">
      <el-table
        :data="tableData"
        :header-cell-style="{background:'#eee'}"
        border
        style="width: 100%;margin-bottom: 20px;"
        @sort-change="sortChange"
        v-loading="loading"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" label="卖家头像">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.himg" alt style="max-width:150px" />
              <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.himg"
              ></el-avatar>
              <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
              />-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="nickname" label="卖家昵称"></el-table-column>
        <el-table-column align="center" prop="num" label="奖品数量"></el-table-column>
        <el-table-column align="center" prop="min_price" label="起拍价"></el-table-column>
        <el-table-column align="center" label="一口价">
          <template slot-scope="scope">
            <div v-if="scope.row.is_buy==1">{{scope.row.buy_price}}</div>
            <div v-if="scope.row.is_buy==0">-</div>
          </template>
        </el-table-column>

        <el-table-column align="center" prop="goods_price" label="奖品总参考价"></el-table-column>
        <el-table-column align="center" prop="goods_y_price" label="奖品总成本价" sortable="custom"></el-table-column>
        <el-table-column align="center" prop="cha" label="价格差价" sortable="custom">
          <template slot-scope="scope">
            <div v-if="scope.row.cha>0" style="color:green">{{scope.row.cha}}</div>
            <div v-else-if="scope.row.cha<0" style="color:green">{{scope.row.cha}}</div>
            <div v-else>{{scope.row.cha}}</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="cha_lv" label="利润率(价格差价 / 总成本)"></el-table-column>
        <el-table-column align="center" fixed="right" label="操作" width="150">
          <template slot-scope="scope">
            <el-button @click="goCheckGoods(scope.row.id)" type="text" size="small">查看</el-button>

            <el-popconfirm
              confirmButtonText="好的"
              cancelButtonText="不用了"
              icon="el-icon-info"
              iconColor="red"
              title="是否确认一口价购买？"
              v-if="scope.row.is_buy==1"
              @onConfirm="justBuy(scope.row.id)"
            >
              <el-button
                style="margin-left:10px;"
                slot="reference"
                type="text"
                size="small"
                v-if="scope.row.status!=2"
              >一口价购买</el-button>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <div style="text-align:right">
        <el-pagination
          background
          layout="prev, pager, next"
          :current-page="currentPage"
          :total="total"
          @current-change="currentChange"
        ></el-pagination>
      </div>
    </el-card>

    <!-- 抽屉 -->
    <el-drawer
      title="交易物品"
      :visible.sync="drawer"
      :direction="direction"
      :before-close="handleClose"
    >
      <el-table
        :data="goodsData"
        :header-cell-style="{background:'#eee'}"
        border
        style="width: 100%;margin-bottom: 20px;"
        v-loading="goodsloading"
      >
        <el-table-column align="center" type="index" width="50" label="序号"></el-table-column>
        <el-table-column align="center" label="物品图片">
          <template slot-scope="scope">
            <el-popover placement="top-start" title trigger="hover">
              <img :src="scope.row.img" alt style="max-width:150px" />
              <!-- <el-avatar shape="square" :size="150" fit="cover" :src="scope.row.img"></el-avatar> -->
              <el-avatar
                slot="reference"
                shape="square"
                :size="50"
                fit="scale-down"
                :src="scope.row.img"
              ></el-avatar>
              <!-- <img
                slot="reference"
                :src="scope.row.img"
                style="width: 60px;height: 60px"
              />-->
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="goods_name" label="物品名称"></el-table-column>
        <el-table-column align="center" prop="price" label="参考价"></el-table-column>
        <el-table-column align="center" prop="y_price" label="成本价"></el-table-column>
        <el-table-column align="center" label="物品状态">
          <template slot-scope="scope">
            <div v-if="scope.row.type==1">预售</div>
            <div v-if="scope.row.type==2">现货</div>
          </template>
        </el-table-column>
        <el-table-column align="center" prop="pass_time" label="自动发货时间"></el-table-column>
      </el-table>
    </el-drawer>
  </div>
</template>

<script>
import {
  getTransitonSquareList,
  justBuyIt,
  checkGoods,
  getAutoInfo,
  setAuto
} from "@/api/transition";
import { parseTime } from "@/utils/index";

export default {
  name: "TransitionList",
  data() {
    return {
      // 分页数据
      total: 0,
      currentPage: 1,
      pageSize: 10,
      //input
      query: {
        keywords: "",
        isBuy: "0",
        orderby: "",
        autobuy: "",
        autopercent: ""
      },
      tableData: [],
      loading: false,
      options: [],
      goodsData: [],
      //   抽屉
      drawer: false,
      direction: "rtl",
      goodsloading: false
    };
  },
  mounted() {
    this.getList();
    this.getAuto();
  },
  methods: {
    //合成商品列表
    async getList() {
      this.loading = true;
      const res = await getTransitonSquareList({
        page: this.currentPage,
        limit: this.pageSize,
        keywords: this.query.keywords,
        is_buy: this.query.isBuy,
        order_by: this.query.orderby
      });
      this.loading = false;
      console.log(res);
      this.total = res.count;
      this.tableData = res.data;
      this.tableData.forEach(item => {
        if (item.add_time == 0) {
          item.add_time = "-";
        } else {
          item.add_time = parseTime(item.add_time, "{y}-{m}-{d} {h}:{i}:{s}");
        }
        if (item.update_time == 0) {
          item.update_time = "-";
        } else {
          item.update_time = parseTime(
            item.update_time,
            "{y}-{m}-{d} {h}:{i}:{s}"
          );
        }
      });
    },
    //自动扫货
    async getAuto() {
      const res = await getAutoInfo({});
      console.log(res);
      this.query.autobuy = res.data.is_auto_bidding;
      this.query.autopercent = res.data.bidding_bl;
    },
    async setAuto() {
      const res = await setAuto({
        is_auto_bidding: this.query.autobuy,
        bidding_bl: this.query.autopercent
      });
      if (res.st == 1) {
        this.$message({
          message: "设置成功",
          type: "success"
        });
      } else {
        this.$message.error("设置失败");
      }
    },
    queryAsk() {
      this.currentPage = 1;
      this.getList();
    },
    //重置
    queryReset() {
      this.resetForm("query");
      this.total = 0;
      this.currentPage = 1;
      this.pageSize = 10;
      this.query.keywords = "";
      this.getList();
    },
    //分页改变
    currentChange(current) {
      this.currentPage = current;
      this.getList();
    },
    // 排序
    sortChange({ column, prop, order }) {
      if (order == "descending") {
        this.query.orderby = prop + "," + "desc";
        this.getList();
      } else if (order == "ascending") {
        this.query.orderby = prop + "," + "asc";
        this.getList();
      }
    },
    //抽屉
    handleClose(done) {
      this.drawer = false;
      done();
    },
    async goCheckGoods(id) {
      this.goodsloading = true;
      const res = await checkGoods({
        id
      });
      this.goodsloading = false;
      console.log(res);
      this.goodsData = res.data;
      this.goodsData.forEach(item => {
        item.pass_time = parseTime(item.pass_time);
      });
      this.drawer = true;
    },
    async justBuy(id) {
      const res = await justBuyIt({
        id
      });
      if (res.st == 1) {
        this.$message({
          message: "购买成功",
          type: "success"
        });
        this.getList();
      } else {
        this.$message.error("购买失败");
      }
    },
    // 重置表单
    resetForm(formName) {
      this.$refs[formName].resetFields();
      this.drawer = false;
    }
  }
};
</script>

<style lang='scss' scoped>
.query-card {
  display: flex;
  justify-content: space-between;
}
.box-card {
  margin-bottom: 20px;
}
::v-deep .el-form {
  display: flex;
}
.search {
  display: flex;
  align-items: center;
}
::v-deep .el-textarea__inner {
  width: 360px !important;
}
::v-deep .el-drawer.rtl {
  width: 950px !important;
  overflow: auto;
}
// 上传图片
::v-deep .avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>